<template>
    <div class="components toolbars">
      <div class="tool">
        <span class="min" @click="minEvent"><img src="../assets/min.png" alt=""></span>
        <span class="max" @click="maxEvent"><img src="../assets/max.png" alt=""></span>
        <span class="close" @click="closeEvent"><img src="../assets/close.png" alt=""></span>
      </div>
    </div>
</template>
<script>
  const ipc = require('electron').ipcRenderer
  export default {
    name: 'toolbars',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      showMax: {
        type: Boolean,
        default: true
      },
      showMin: {
        type: Boolean,
        default: true
      },
      showClose:{
        type: Boolean,
        default: true
      }
    },
    data(){
      return {
        isBig:true
      }
    },
    methods: {
      minEvent(){
        console.log('min');
        ipc.send('hide-window', null)
        
      },
      maxEvent(){
        if(this.isBig){
          console.log('max');
          ipc.send('show-window', null);
          this.isBig = false;
        }else{
          console.log('还原');
          ipc.send('orignal-window', null)
          this.isBig = true;
        }
        
      },
      closeEvent(){
        console.log('close');
        ipc.send('close-window', null)
      },
    }
  }
</script>
<style lang='less'>

  .tool{
    box-sizing: border-box;
    position: fixed;
    right:20px;
    top: 0px;
    height: 30px;
    z-index: 99999999999;
    // border: 1px solid #000;
    span:last-child{
      border-radius: 0px 0px 5px 0px;
      &:hover{
        background: #B11F06;
      }
    }
    span:first-child{
      border-radius: 0px 0px 0px 5px;
    }
    span{
      width: 40px;
      height: 25px;
      float: left;
      display: inline-block;
      // url(../assets/min.png) no-repeat no-repeat
      background: #ccc ;
      background-size: contain;
      cursor: pointer;
      text-align: center;
      line-height: 25px;
      &:hover{
        background: #b3b2b1;
      }
      img{
        width: 12.5px;
        line-height: 30px;
        font-size: 0px;
        display: inline-block;
        margin-top: 5px;
      }
      
      
    }
    
  }
</style>

